<template>
    <el-scrollbar ref="scrollContainer" :min-size="1" class="Scroll" :vertical="false" @wheel.prevent="handleScroll">
        <slot></slot>
    </el-scrollbar>
</template>
<script setup lang="ts">

const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance() as any;

const emits = defineEmits(["scroll"]);
const emitScroll = () => {
    emits("scroll");
};

const props = defineProps({
    scrollData: {
        type: Array,
        default: () => [],
    },
});

const scrollWrapper = computed(
    () => proxy?.$refs.scrollContainer.$refs.wrapRef
);

onMounted(() => {
    scrollWrapper.value.addEventListener("scroll", emitScroll, true);
});
onBeforeUnmount(() => {
    scrollWrapper.value.removeEventListener("scroll", emitScroll);
});

function handleScroll(e: WheelEvent) {
    const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
    scrollWrapper.value.scrollLeft =
        scrollWrapper.value.scrollLeft + eventDelta / 4;
}

function moveToTarget(currentTag: string) {
    const $container = proxy.$refs.scrollContainer.$el;
    const $containerWidth = $container.offsetWidth;
    const $scrollWrapper = scrollWrapper.value;

    let firstTag = null;
    let lastTag = null;

    if (props.scrollData.length > 0) {
        firstTag = props.scrollData[0];
        lastTag = props.scrollData[props.scrollData.length - 1];
    }
    if (firstTag === currentTag) {
        $scrollWrapper.scrollLeft = 0;
    } else if (lastTag === currentTag) {
        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
    } else {
        const currentIndex = props.scrollData.findIndex(
            (item) => item === currentTag
        );
        const prevViewItem = props.scrollData[currentIndex - 1];
        const nextViewItem = props.scrollData[currentIndex + 1];

        let prevTag = null;
        let nextTag = null;

        if (prevViewItem) {
            prevTag = document.querySelector(`[data-scroll='${prevViewItem}']`);
        }

        if (nextViewItem) {
            nextTag = document.querySelector(`[data-scroll='${nextViewItem}']`);
        }
        if (nextTag) {
            const afterNextTagOffsetLeft =
                (nextTag as any).offsetLeft +
                (nextTag as any).offsetWidth +
                tagAndTagSpacing.value;

            if (
                afterNextTagOffsetLeft >
                $scrollWrapper.scrollLeft + $containerWidth
            ) {
                $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
            }
        } else {
            // nextTag 不存在时的处理逻辑，例如直接跳转到当前标签位置
            const currentTagElement = document.querySelector(
                `[data-scroll='${currentTag}']`
            );
            if (currentTagElement) {
                $scrollWrapper.scrollLeft = (currentTagElement as any).offsetLeft;
            }
        }
        if (prevTag) {
            const beforePrevTagOffsetLeft =
                (prevTag as any).offsetLeft - tagAndTagSpacing.value;

            if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
                $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
            }
        }
    }
}

defineExpose({
    moveToTarget,
});
</script>



<style lang="scss" scoped>
.Scroll {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    // 完全隐藏滚动条
    :deep(.el-scrollbar__bar) {
        display: none !important;
    }

    :deep(.el-scrollbar__wrap) {
        height: 100%;
        // 隐藏原生滚动条
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
        
        &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
    }
}
</style>
